<template>
    <div class='synthesize'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
                <el-form-item>
                    <div class="group">
                        <div class="btn" v-for="item,index in btnList" :key="index" @click="changeTab(item, index)" :class="{'active':curLine==index}">{{item.dictLabel}}</div>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="key_range" v-if="queryParams.time_type == 3">
                    <el-date-picker v-model="queryParams.key_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd" />
                </el-form-item>
                <el-form-item v-if="queryParams.time_type == 3">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <!-- <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['customer:manage:export']">导出
                    </el-button> -->
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <div v-loading="loading">
                <p class="tit mb20">订单统计</p>
                <el-descriptions class="margin-top decs mb20" :column="1" :size="size" border>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            销售总额
                        </template>
                        <span class="p">{{ orders.sales_volume }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            有效订单总数
                        </template>
                        <span class="p">{{ orders.effective_order_num }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            有效订单总额
                        </template>
                        <span class="p">{{ orders.effective_order_volume }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            无效订单总数(关闭或取消)
                        </template>
                        <span class="p">{{ orders.invalid_order_num }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            无效订单总额
                        </template>
                        <span class="p">{{ orders.invalid_order_volume }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            已成交订单总数
                        </template>
                        <span class="p">{{ orders.deal_order_num }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            已成交订单总额
                        </template>
                        <span class="p">{{ orders.deal_order_volume }}</span>
                    </el-descriptions-item>
                </el-descriptions>
                <p class="tit mb20">会员统计</p>
                <el-descriptions class="margin-top decs mb20" :column="1" :size="size" border>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            会员总数
                        </template>
                        <span class="p">{{ users.user_num }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            有订单会员数
                        </template>
                        <span class="p">{{ users.user_num_order }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            会员订单总数
                        </template>
                        <span class="p">{{ users.order_num }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            会员购物总额
                        </template>
                        <span class="p">{{ users.user_shop_total }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            会员服务总额
                        </template>
                        <span class="p">{{ users.user_service_total }}</span>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            每会员订单数
                        </template>
                        <span class="p">44444</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            每会员购物额
                        </template>
                        <span class="p">44444</span>
                    </el-descriptions-item> -->
                </el-descriptions>
                <!-- <p class="tit mb20">积分统计</p>
                <el-descriptions class="margin-top decs mb20" :column="1" :size="size" border>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            总赠送消费积分(优币)
                        </template>
                        <span class="p">11111</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            总赠送等级积分(成长值)
                        </template>
                        <span class="p">222222</span>
                    </el-descriptions-item>
                    <el-descriptions-item :labelStyle='labelStyle'>
                        <template slot="label">
                            操作
                        </template>
                        <div class="flex">
                            <span class="p text-link">查看商品</span>
                            <span class="p text-link">查看订单</span>
                        </div>
                    </el-descriptions-item>
                </el-descriptions> -->
            </div>
        </div>
    </div>
</template>

<script>
import { getStaticInfo } from "@/api/finance/finance.js"
export default {
    name: 'synthesize',
    components: {

    },
    data() {
        return {
            showSearch: true,
            loading: false,
            total: 0,
            pageCount: 0,
            queryParams: {
                time_type:'',
                key_range:[],
            },
            tableList: [
                {}
            ],
            size: 'mini',
            labelStyle: { 'width': '50%', "text-align": "center" },
            btnList: [
                {
                    dictLabel: '全部',
                    dictValue: 0
                },
                {
                    dictLabel: '最近30天',
                    dictValue: 1
                },
                {
                    dictLabel: '最近90天',
                    dictValue: 2
                },
                {
                    dictLabel: '时间区间',
                    dictValue: 3
                },
            ],
            curLine: 0,
            orders:{},
            users:{}
        }
    },
    created() {
          this.getList()
    },
    methods: {
        getList() {
            this.loading = true;
            this.queryParams.date_start = this.queryParams.key_range.length > 0 ? this.queryParams.key_range[0] : null
            this.queryParams.date_end = this.queryParams.key_range.length > 0 ? this.queryParams.key_range[1] : null
            getStaticInfo(this.queryParams).then(res => {
                this.orders = res.data.orders;
                this.users = res.data.users
                this.loading = false;
            });
        },
        changeTab(item,index) {
            this.curLine = index
            this.queryParams.time_type = item.dictValue
            this.getList()
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                // return exportBanner(queryParams);
            }).then((response) => {
                // this.download(response.msg);
            });
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
}

</script>
<style scoped lang='scss'>
.group {
    display: flex;
    .btn {
        width: 87px;
        height: 29px;
        border: 1px solid rgba(204, 204, 204, 1);
        text-align: center;
        line-height: 29px;
        color: #657180;
        font-size: 12px;
        cursor: pointer;
        &.active {
            background: #1abc9c;
            color: #ffffff;
        }
    }
    .btn:nth-child(1) {
        border-radius: 3px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .btn:nth-child(2) {
        border-left: 0;
        border-right: 0;
    }
    .btn:nth-child(3) {
        border-radius: 3px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
}
.tit {
    font-size: 14px;
    color: #666666;
    font-weight: 600;
    border-left: 5px solid #409eff;
    padding-left: 8px;
    height: 14px;
    line-height: 14px;
}

.flex {
    width: 100%;
    display: flex;
    justify-content: center;
    .p {
        padding: 0 8px;
        cursor: pointer;
    }
}
.p {
    display: block;
    font-size: 12px;
    text-align: center;
}
</style>